<template>
    <div>
        <div v-wechat-title="$route.meta.title"></div>
        <el-container>
            <el-header>
                <div>
                    在线商城商家后台管理系统
                    <el-button class="logoutbtn" type="info" @click="logout">
                        退出
                    </el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <div>
                        <el-menu
                            :default-active="activepath"
                            class="el-menu-vertical-demo"
                            :unique-opened="true"
                        >
                            <el-menu-item
                                index="1"
                                @click="saveNavState('1', '/buswelcome')"
                            >
                                <i class="el-icon-menu"></i>
                                <span slot="title">首页</span>
                            </el-menu-item>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-edit"></i>
                                    <span>商品</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item
                                        index="1-1"
                                        @click="
                                            saveNavState('1-1', '/busgoodslist')
                                        "
                                        >商品列表</el-menu-item
                                    >
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="7">
                                <template slot="title">
                                    <i class="el-icon-present"></i>
                                    <span>订单</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item
                                        index="2-1"
                                        @click="
                                            saveNavState('2-1', '/busorderlist')
                                        "
                                        >订单列表</el-menu-item
                                    >
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </div>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activepath: '',
        };
    },
    created() {
        this.checktoken();
        this.activepath = window.sessionStorage.getItem('activepath');
    },
    methods: {
        checktoken() {
            let params = new URLSearchParams();
            params.append('token', window.sessionStorage.getItem('token'));
            this.$http
                .post('checkbus', params)
                .then((res) => {
                    if (res.data.code != 200) {
                        this.$Message.error('商家越权操作！');
                        this.$router.push('/index');
                    }
                })
                .catch((err) => {
                    this.$Message.error('系统错误！', err);
                });
        },
        logout() {
            this.$confirm('确定退出吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    window.sessionStorage.clear();
                    this.$Message.success('退出成功！');
                    this.$router.push('/buslogin');
                })
                .catch(() => {
                    this.$Message.info('已取消退出！');
                });
        },
        // 保存连接激活状态
        saveNavState(activepath, url) {
            window.sessionStorage.setItem('activepath', activepath);
            this.activepath = activepath;
            this.$router.push(url);
        },
    },
};
</script>

<style scoped>
.el-container {
    height: 700px;
}
.el-header,
.el-footer {
    background-color: rgb(171, 176, 247);
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: white;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 30px;
    height: 100 vh;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.logoutbtn {
    position: absolute;
    right: 30px;
    top: 10px;
}
</style>